Angular Universal হল Angular অ্যাপ্লিকেশনগুলির জন্য একটি Server-Side Rendering (SSR) প্রযুক্তি, যা সার্ভার সাইডে HTML রেন্ডারিং করার মাধ্যমে অ্যাপ্লিকেশন লোডিং স্পিড বাড়াতে এবং SEO (Search Engine Optimization) ভালো করার জন্য ব্যবহৃত হয়। এটি মূলত Angular অ্যাপ্লিকেশনকে সার্ভারে রেন্ডার করে, তারপর ক্লায়েন্ট সাইডে অ্যাপ্লিকেশনটি হাইড্রেট (hydrate) করা হয়, যাতে দ্রুত লোড এবং উন্নত SEO সুবিধা পাওয়া যায়।

Angular Universal এর সাহায্যে, অ্যাপ্লিকেশনটি ব্রাউজারে রেন্ডার হওয়ার আগে সার্ভারেই HTML তৈরি হয়, যার ফলে ব্যবহারকারীরা দ্রুত অ্যাপ্লিকেশন দেখতে পান এবং সার্চ ইঞ্জিনের জন্য অ্যাপ্লিকেশনটি আরও "ক্রলেবল" (search engine crawlable) হয়।

Angular Universal এর সুবিধা

1. দ্রুত লোডিং: অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময়, সার্ভারে HTML রেন্ডারিং করার ফলে ব্যবহারকারী দ্রুত কনটেন্ট দেখতে পায়, কারণ ব্রাউজারের কাছে শুধু JSON বা JavaScript ফাইল পাঠানো হয়।
2. SEO উন্নতি: সার্ভার সাইড রেন্ডারিং SEO-র জন্য গুরুত্বপূর্ণ, কারণ সার্চ ইঞ্জিনগুলির জন্য অ্যাপ্লিকেশন সহজে ক্রলযোগ্য হয়ে ওঠে। ব্রাউজারের JavaScript রান করার জন্য সার্চ ইঞ্জিনকে অপেক্ষা করতে হয় না।
3. Social Media Sharing: Angular Universal সার্ভারে প্রাক-রেন্ডারিংয়ের মাধ্যমে social media platforms (যেমন Facebook, Twitter) এর জন্য প্রাসঙ্গিক metatags তৈরি করতে সাহায্য করে।
4. সার্ভার রেন্ডারিং এবং ক্লায়েন্ট হাইড্রেটেশন: Angular Universal অ্যাপ্লিকেশন প্রথমে সার্ভার সাইডে রেন্ডার হয় এবং তারপর ক্লায়েন্ট সাইডে তা হাইড্রেট করা হয়, যা অ্যাপ্লিকেশনকে ইন্টারেক্টিভ এবং ফাস্ট করে তোলে।

Angular Universal সেটআপ

Angular Universal শুরু করার জন্য কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে। এখানে আমরা একটি সাধারণ Angular অ্যাপ্লিকেশন সেটআপ করে তা Universal অ্যাপ্লিকেশন হিসেবে কনভার্ট করার প্রক্রিয়া আলোচনা করব।

1. Angular Universal ইনস্টল করা

প্রথমে আপনাকে আপনার Angular অ্যাপ্লিকেশনে Angular Universal যোগ করতে হবে। Angular CLI ব্যবহার করে এটি সহজে ইনস্টল করা যায়।

ng add @nguniversal/express-engine

এই কমান্ডটি Angular Universal এবং Express সার্ভার ইঞ্জিন যুক্ত করবে। এটি কিছু কনফিগারেশন ফাইল এবং সার্ভার সাইডে চলার জন্য প্রয়োজনীয় কোড তৈরি করবে।

2. অ্যাপ্লিকেশন কনফিগারেশন

Angular Universal ইন্সটল করার পর, angular.json ফাইলে কিছু পরিবর্তন করা হবে, এবং একটি নতুন সার্ভার ফাইল তৈরি হবে। নতুন সার্ভার ফাইলটি সাধারণত server.ts নামে তৈরি হয়।

server.ts উদাহরণ:

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModule } from './src/main.server';
import { app } from 'express';
import { join } from 'path';

// Enable production mode
enableProdMode();

// Create an express server
const server = app();

// Set the views directory to the output path for the server
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// Express engine setup
server.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));

server.set('view engine', 'html');
server.set('views', DIST_FOLDER);

// Serve static files
server.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All other routes will be handled by Angular Universal
server.get('*', (req, res) => {
  res.render('index', { req });
});

// Start the server
const port = process.env.PORT || 4000;
server.listen(port, () => {
  console.log(`Listening on http://localhost:${port}`);
});

3. Server-side module তৈরি

Angular Universal এর জন্য আপনাকে একটি পৃথক server-side module তৈরি করতে হবে। এটি মূলত AppServerModule হবে, যা সার্ভারে রেন্ডারিং করা হয়।

app.server.module.ts উদাহরণ:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

4. Build এবং Serve

Angular Universal অ্যাপ্লিকেশন তৈরি এবং চালানোর জন্য নিম্নলিখিত কমান্ডগুলি ব্যবহার করতে হবে:

1. Build Angular Universal অ্যাপ:

   npm run build:ssr
   

2. Serve অ্যাপ্লিকেশন:

   npm run serve:ssr
   

এটি অ্যাপ্লিকেশনটি সার্ভারে রেন্ডার করবে এবং আপনার অ্যাপ্লিকেশনকে http://localhost:4000 এ অ্যাক্সেসযোগ্য করে তুলবে।

Angular Universal এর সাহায্যে SEO উন্নতি

সার্ভার সাইড রেন্ডারিং (SSR) দ্বারা, অ্যাপ্লিকেশনটি যখন সার্ভারে রেন্ডার হয়, তখন সমস্ত HTML কনটেন্ট ক্লায়েন্টে পাঠানো হয়। সার্চ ইঞ্জিনগুলি এই HTML কনটেন্টটি সরাসরি পড়ে এবং এটি তাদের ইনডেক্সে যোগ করে, যার ফলে SEO র‍্যাঙ্কিং উন্নত হয়। সাধারণত, SPA (Single Page Application)-এ যেহেতু JavaScript রান করার জন্য অপেক্ষা করতে হয়, তাই সার্চ ইঞ্জিনগুলি সঠিকভাবে এই অ্যাপ্লিকেশনগুলি ক্রল করতে পারে না। Angular Universal এই সমস্যা সমাধান করে।

সারাংশ

Angular Universal একটি শক্তিশালী প্রযুক্তি যা Angular অ্যাপ্লিকেশনগুলির Server-Side Rendering (SSR) সক্ষম করে। এটি অ্যাপ্লিকেশন লোডিং স্পিড বাড়াতে এবং SEO উন্নত করতে সহায়ক। Angular Universal ব্যবহার করলে অ্যাপ্লিকেশনটি প্রথমে সার্ভারে রেন্ডার হবে এবং পরে ক্লায়েন্টে এটি হাইড্রেট করা হবে। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনার অ্যাপ্লিকেশনটি SEO-র জন্য অপ্টিমাইজড হতে পারে, যেমন ইকমার্স সাইট বা ব্লগ অ্যাপ্লিকেশন।